<template>
  <div>
    <n-grid :x-gap="24">
      <n-grid-item span="6">
        <n-card :bordered="false" size="small" class="proCard">
          <n-thing
            class="thing-cell"
            v-for="item in typeTabList"
            :key="item.key"
            :class="{ 'thing-cell-on': state.type === item.key }"
            @click="switchType(item)"
          >
            <template #header>{{ item.name }}</template>
            <template #description>{{ item.desc }}</template>
          </n-thing>
        </n-card>
      </n-grid-item>
      <n-grid-item span="18">
        <n-card :bordered="false" size="small" :title="state.typeTitle" class="proCard">
          <UserSettings v-if="state.type === 1" />
          <DatabaseSettings v-if="state.type === 2" />
          <AutoLoginSettings v-if="state.type === 3" />
          <AISettings v-if="state.type === 4" />
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import UserSettings from './UserSettings.vue';
  import DatabaseSettings from './DatabaseSettings.vue';
  import AutoLoginSettings from './AutoLoginSettings.vue';
  import AISettings from './AISettings.vue';

  const route = useRoute();

  const typeTabList = [
    {
      name: '用户设置',
      desc: '昵称、主题等个人偏好设置',
      key: 1,
    },
    {
      name: '数据库设置',
      desc: 'Oracle数据库连接配置',
      key: 2,
    },
    {
      name: '自动登录设置',
      desc: '自动登录环境地址配置',
      key: 3,
    },
    {
      name: 'AI设置',
      desc: 'AI服务API Key配置',
      key: 4,
    },
  ];

  const state = reactive({
    type: 1,
    typeTitle: '用户设置',
  });

  function switchType(e: any) {
    state.type = e.key;
    state.typeTitle = e.name;
  }

  // 根据路由查询参数初始化选中的选项卡
  onMounted(() => {
    const tab = route.query.tab;
    if (tab === 'ai') {
      const aiTab = typeTabList.find((item) => item.key === 4);
      if (aiTab) {
        switchType(aiTab);
      }
    }
  });
</script>

<style lang="less" scoped>
  .thing-cell {
    margin-bottom: 12px;
    cursor: pointer;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.3s;
  }

  .thing-cell:hover {
    border-color: #36ad6a;
  }

  .thing-cell-on {
    border-color: #36ad6a;
    background-color: #f6ffed;
  }
</style>
